﻿<!DOCTYPE html>
<html>
<head>
    <style>
        #game-container {
            width: 500px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        
        #player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translate(0, -50%);
        }
        
        .enemy {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translate(0, -50%);
        }
        
        .bullet {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 70px;
            transform: translate(0, -50%);
        }
        
        #score {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
        <div id="score">Score: 0</div>
    </div>
    
    <script>
        var gameContainer = document.getElementById("game-container");
        var player = document.getElementById("player");
        var scoreElement = document.getElementById("score");
        var bulletSpeed = 5;
        var enemySpeed = 2;
        var isShooting = false;
        var score = 0;
        
        // 监听键盘按下事件
        document.addEventListener("keydown", function(event) {
            if (event.key === " ") { // 空格键
                if (!isShooting) {
                    isShooting = true;
                    shoot();
                }
            }
            
            if (event.key === "ArrowUp") { // 上箭头键
                movePlayer("up");
            }
            
            if (event.key === "ArrowDown") { // 下箭头键
                movePlayer("down");
            }
        });
        
        // 射击函数
        function shoot() {
            var bullet = document.createElement("div");
            bullet.className = "bullet";
            gameContainer.appendChild(bullet);
            
            var bulletPosition = player.offsetTop + player.offsetHeight / 2;
            var interval = setInterval(function() {
                bulletPosition -= bulletSpeed;
                bullet.style.top = bulletPosition + "px";
                
                // 判断是否命中目标
                var enemies = document.getElementsByClassName("enemy");
                for (var i = 0; i < enemies.length; i++) {
                    var enemy = enemies[i];
                    if (bullet.offsetLeft >= enemy.offsetLeft && 
                        bullet.offsetLeft <= enemy.offsetLeft + enemy.offsetWidth &&
                        bulletPosition >= enemy.offsetTop &&
                        bulletPosition <= enemy.offsetTop + enemy.offsetHeight) {
                        clearInterval(interval);
                        isShooting = false;
                        bullet.remove();
                        enemy.remove();
                        score += 10;
                        scoreElement.textContent = "Score: " + score;
                        break;
                    }
                }
                
                // 判断是否超出边界
                if (bulletPosition <= 0) {
                    clearInterval(interval);
                    isShooting = false;
                    bullet.remove();
                }
            }, 10);
        }
        
        // 移动玩家
        function movePlayer(direction) {
            var topPosition = player.offsetTop;
            
            if (direction === "up") {
                topPosition -= 10;
            } else if (direction === "down") {
                topPosition += 10;
            }
            
            // 限制玩家移动范围
            if (topPosition < 0) {
                topPosition = 0;
            }
            
            if (topPosition > gameContainer.offsetHeight - player.offsetHeight) {
                topPosition = gameContainer.offsetHeight - player.offsetHeight;
            }
            
            player.style.top = topPosition + "px";
        }
        
        // 创建敌人
        setInterval(function() {
            var enemy = document.createElement("div");
            enemy.className = "enemy";
            gameContainer.appendChild(enemy);
            
            var topPosition = Math.random() * (gameContainer.offsetHeight - enemy.offsetHeight);
            enemy.style.top = topPosition + "px";
            
            var interval = setInterval(function() {
                var leftPosition = enemy.offsetLeft - enemySpeed;
                enemy.style.left = leftPosition + "px";
                
                // 判断是否击中玩家
                if (leftPosition <= player.offsetLeft + player.offsetWidth &&
                    leftPosition >= player.offsetLeft &&
                    enemy.offsetTop >= player.offsetTop &&
                    enemy.offsetTop <= player.offsetTop + player.offsetHeight) {
                    clearInterval(interval);
                    enemy.remove();
                    alert("Game Over");
                }
                
                // 判断是否超出边界
                if (leftPosition + enemy.offsetWidth <= 0) {
                    clearInterval(interval);
                    enemy.remove();
                }
            }, 10);
        }, 2000);
    </script>
</body>
</html>